<template>
  <div class="journalizing">
    <!--  分录类型  -->
    <el-dialog
      v-dialogDrag
      :title="title"
      model
      :visible.sync="isSubjectDialog"
      :close-on-click-modal="false"
      width="60%"
      center
      :before-close="confirmFal"
    >
      <el-form :model="proValue" label-width="100px" size="mini">
        <el-form-item :label="$t('market.journaliname')">
          <el-input v-model="proValue.fname" />
        </el-form-item>
        <el-form-item :label="$t('market.journaliDesc')">
          <el-input v-model="proValue.fdescription	" />
        </el-form-item>
        <el-form-item :label="$t('market.journaliNum')">
          <el-input v-model="proValue.fnumber" disabled />
        </el-form-item>
      </el-form>
      <div style="margin-bottom: 5px;">
        <el-button size="mini" @click="newly(1)">{{ $t('btn.newHang') }}<!--新增行--></el-button>
        <el-button size="mini" @click="newly(2)">{{ $t('btn.delHang') }}<!--删除行--></el-button>
      </div>
      <div>
        <jc-table
          :table-data="subjectData"
          :table-header="tableHeader"
          table-height="400px"
          serial
          @rowClick="rowClick"
        >
          <el-table-column :label="$t('market.subject')" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fsubjectName"
                size="mini"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="sujectOpen(scope.$index)"
                />
              </el-input>
            </template>
          </el-table-column>
          <el-table-column :label="$t('market.priority')" prop="fseq" align="center" />
        </jc-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmFal">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="confirmConfig">{{ $t('btn.confirm') }}</el-button>
      </span>
    </el-dialog>
    <!--    科目列表-->
    <subjectList v-if="isSubListVisibled" @subject="sublistData" />
  </div>
</template>

<script>
import subjectList from '@/views/financial/voucherTemplate/components/subjectList'
import {
  querySubjectGroupDetails,
  insertSubjectGroupData,
  updateSubjectGroupData
} from '@/api/financial/voucher'
export default {
  components: {
    subjectList
  },
  props: {
    title: { // title
      type: String,
      default: ''
    },
    fgroupId: { // 来源单据id
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isSubjectDialog: true,
      isSubListVisibled: false, // 科目列表
      indexSelf: 0,
      tableHeader: [],
      subjectData: [{
        fsubjectId: '',
        fsubjectName: '',
        fseq: 1
      }],
      delArr: [],
      proValue: {
        fname: '',
        fdescription: '',
        fnumber: ''
      }
    }
  },
  watch: {
    fgroupId: {
      handler(val) {
        if (val > 0) this.queryGroupDetails()
      },
      immediate: true
    }
  },
  methods: {
    // 分录详情
    queryGroupDetails() {
      querySubjectGroupDetails({ fgroupId: this.fgroupId }).then(res => {
        if (res.code === 0) {
          this.delArr = []
          this.proValue = res.data
          this.subjectData = res.data.details
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 科目列表
    sujectOpen(index) {
      this.indexSelf = index
      this.isSubListVisibled = true
    },
    // 科目数据
    sublistData(item) {
      if (item.fsubjectId) {
        const ite = this.subjectData[this.indexSelf]
        ite.fsubjectId = item.fsubjectId
        ite.fsubjectName = item.fname
      }
      this.isSubListVisibled = false
    },
    // 确认 新增
    confirmConfig() {
      const api = this.fgroupId ? updateSubjectGroupData : insertSubjectGroupData
      this.proValue.details = this.subjectData
      const DATA = {
        fgroupId: this.fgroupId,
        delArr: this.delArr,
        ...this.proValue
      }
      api(DATA).then(res => {
        if (res.code === 0) {
          this.confirmFal()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 取消
    confirmFal() {
      this.$emit('subject')
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    // 优先级
    priority() {
      this.subjectData.map((item, index) => {
        this.$nextTick(() => {
          item.fseq = index + 1
        })
      })
    },
    // 新增/删除行
    newly(ev) {
      const DATA = {
        fsubjectId: '',
        fsubjectName: '',
        fseq: 1
      }
      if (ev === 1) {
        this.subjectData.push(DATA)
      } else {
        const item = this.subjectData[this.indexSelf].fentryId
        this.delArr.push(item)
        this.subjectData.splice(this.indexSelf, 1)
      }
      this.priority()
    }
  }
}
</script>

<style scoped lang="scss">
.journalizing {
  .el-form{
    display: flex;
  }
}
</style>
